/**
 * @file 分类组件
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2022/11/05
 */
import Types from '@/components/CustomPage/workflow/common/types'
import {
  Slider,
  Radio,
  Color,
  Input,
  Switch,
  Select
} from '@/components/CustomPage/fields/widget'
import { BasicOption } from './basicops'
import { DataOption } from './dataops'
import ClassifyList from '../widget/ClassifyList'
import TextClassifyComp from '../widget/classify/textClassifyComp'
import FourLevelClassify from '../widget/fourLevelClassify/index.vue'
export default {
  /**
   * 列表分类组件
   */
  ClassifyList() {
    return {
      target: ClassifyList,
      parameter: {
        relate: true,
        mold: 'field',
        label: '列表分类组件',
        value: ''
      },
      option: [
        {
          title: '基础配置',
          fields: [
            ...BasicOption(),
            {
              type: Slider,
              option: {
                label: '左右间距',
                name: 'spacing',
                value: 24,
                max: 100,
                step: 1
              }
            },
            {
              type: Radio,
              option: {
                label: '圆角展示',
                name: 'radius',
                type: 'button',
                list: [
                  { name: '圆角', value: '1' },
                  { name: '直角', value: '2' }
                ],
                layout: 'horizon',
                value: '1'
              }
            },
            {
              type: Radio,
              option: {
                label: '图标展示',
                name: 'icon',
                type: 'button',
                list: [
                  { name: '展示', value: '1' },
                  { name: '不展示', value: '2' }
                ],
                layout: 'horizon',
                value: '1'
              }
            },
            {
              type: Radio,
              option: {
                label: '箭头展示',
                name: 'isLink',
                type: 'button',
                list: [
                  { name: '展示', value: '1' },
                  { name: '不展示', value: '2' }
                ],
                layout: 'horizon',
                value: '1'
              }
            },
            {
              type: Slider,
              option: {
                label: '图标大小',
                name: 'iconSize',
                value: 48,
                max: 100,
                step: 1
              }
            },
            {
              type: Slider,
              option: {
                label: '字体大小',
                name: 'fontSize',
                value: 28,
                max: 100,
                step: 1
              }
            },
            {
              type: Color,
              option: {
                label: '字体颜色',
                name: 'color',
                value: '#323233',
                showalpha: true
              }
            },
            {
              type: Radio,
              option: {
                label: '字体加粗',
                name: 'isBold',
                type: 'button',
                list: [
                  { name: '加粗', value: '1' },
                  { name: '不加粗', value: '2' }
                ],
                layout: 'horizon',
                value: '2'
              }
            }
          ]
        },
        ...DataOption()
      ],
      valueType: Types.VALUETYPES.STRING
    }
  },
  /**
   * 答题闯关分类组件
   */
  textClassifyComp() {
    return {
      target: TextClassifyComp,
      parameter: {
        relate: true,
        mold: 'field',
        label: '答题闯关分类',
        value: ''
      },
      option: [
        {
          title: '基础配置',
          fields: [
            ...BasicOption(),
            {
              type: Switch,
              option: {
                label: '是否使用默认颜色',
                name: 'isDefaultBg',
                value: true,
                activetext: '是',
                inactivetext: '否'
              }
            },
            {
              type: Color,
              option: {
                label: '背景颜色',
                name: 'bgcolor',
                value: '#2DA7B5',
                showalpha: true
              }
            },
            {
              type: Color,
              option: {
                label: '指示线颜色',
                name: 'textcolor',
                value: '#fff',
                showalpha: true
              }
            },
            {
              type: Color,
              option: {
                label: '选中字体颜色',
                name: 'activeColor',
                value: '#fff',
                showalpha: true
              }
            },
            {
              type: Color,
              option: {
                label: '默认字体颜色',
                name: 'inactiveColor',
                value: '#fff',
                showalpha: true
              }
            }
          ]
        },
        ...DataOption()
      ],
      valueType: Types.VALUETYPES.CATEGORYCHANGE
    }
  },
  /**
   * 四级分类组件
   * @constructor
   */
  FourLevelClassify() {
    return {
      target: FourLevelClassify,
      parameter: {
        relate: true,
        mold: 'field',
        label: '四级分类组件'
      },
      option: [
        {
          title: '基础配置',
          fields: [
            ...BasicOption(),
            {
              type: Input,
              option: {
                label: '数据name标识',
                name: 'name',
                value: 'classifyName'
              }
            },
            {
              type: Input,
              option: {
                label: '数据id标识',
                name: 'value',
                value: 'id'
              }
            },
            {
              type: Input,
              option: {
                label: '数据parentId标识',
                name: 'parentId',
                value: 'parentId'
              }
            },
            {
              type: Input,
              option: { label: '数据icon标识', name: 'icon', value: 'icon' }
            },
            {
              type: Input,
              option: {
                label: '数据children标识',
                name: 'children',
                value: 'children'
              }
            },
            {
              type: Select,
              option: {
                label: '组件样式',
                name: 'style',
                list: [
                  { name: '样式1', value: 1 },
                  { name: '样式2', value: 2 },
                  { name: '样式3', value: 3 },
                  { name: '样式4', value: 4 }
                ],
                value: 1
              }
            },
            {
              type: Color,
              option: {
                label: '背景颜色',
                name: 'bgColor',
                value: '#fff',
                showalpha: true
              }
            },
            {
              type: Color,
              option: {
                label: '未选中颜色',
                name: 'titleInactiveColor',
                value: '#333',
                showalpha: true
              }
            },
            {
              type: Radio,
              option: {
                label: '选中颜色类型',
                name: 'colorType',
                list: [
                  { name: '自定义', value: true },
                  { name: '系统主题色', value: false }
                ],
                value: false,
                override: function(ths, e) {
                  // console.log(ths, e, 306);
                  ths.$nextTick(() => {
                    for (
                      let i = 0;
                      i < ths.$parent.$parent.$children.length;
                      i++
                    ) {
                      if (
                        ths.$parent.$parent.$children[i].option.name ===
                          'titleActiveColor' ||
                        ths.$parent.$parent.$children[i].option.name === 'color'
                      ) {
                        ths.$parent.$parent.$children[i].visible = e
                      }
                    }
                  })
                }
              }
            },
            {
              type: Color,
              option: {
                label: '选中颜色',
                name: 'color',
                value: '#2DA7B5',
                showalpha: true
              }
            },
            {
              type: Color,
              option: {
                label: '选中文字颜色',
                name: 'titleActiveColor',
                value: '#2DA7B5',
                showalpha: true
              }
            }
          ]
        },
        ...DataOption()
      ],
      valueType: Types.VALUETYPES.CATEGORYCHANGE
    }
  }
}
